import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      // 控制步骤条高亮停留的地方
      activeStep: 1,

      // 绑定的el-tab-pane里面的name值,控制每一个标签页的显示
      activeName: 'first',

      // 标签页
      tabPosition: 'left',

      // 基本页表单的数据
      infoForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        // 商品分类数据(三级联动选中的数据)
        goods_cat: [],

        // 上传图片路径
        pics: [],

        // 富文本的内容
        goods_introduce: ''
      },

      // 单选框  这里label的值负责收集数据的
      radio: '1',

      defaultProps: {
        label: 'cat_name',
        value: 'cat_id'
      },
      // 级联选择器的数据
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            }
          ]
        }
      ],

      // 上传图片
      dialogImageUrl: '',
      dialogVisible: false,

      // 请求头
      headers: {
        Authorization: localStorage.getItem('token')
      },

      // 富文本的配置项,默认占位符
      editorOption: {
        placeholder: '哈哈'
      }
    }
  },

  created() {
    this.loadGoodsList()
  },
  methods: {
    // 点击切换标签页
    changeTab(e) {
      // e.index是个变量+1的话，变成字符串，需要的是一个数字
      this.activeStep = +e.index + 1
    },

    // 点击下一步进行跳转
    toNextStep(name, index) {
      // 点击下一步时,步骤条和标签要要同步进行跳转
      this.activeName = name
      this.activeStep = index
    },

    // 加载所有的商品分类
    async loadGoodsList() {
      let res = await this.$axios.get('categories', {
        params: {
          type: 3
        }
      })
      // console.log(res)
      this.options = res.data.data
    },

    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    // 点击预览时会触发此函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 图片上传成功的回调函数
    uploadSuccess(res) {
      // console.log(res)
      // 将后台返回的临时路径赋值给pics，后台需要的是一个对象
      this.infoForm.pics.push({
        pic: res.data.tmp_path
      })
    },

    // 点击确认,添加商品
    async addGoods() {
      const {
        goods_name,
        goods_price,
        goods_weight,
        goods_number,
        goods_cat,
        goods_introduce
      } = this.infoForm

      let res = await this.$axios.post('goods', {
        goods_name,
        goods_price,
        goods_weight,
        goods_number,
        goods_cat: goods_cat.join(','),
        goods_introduce
      })

      console.log(res)
      // 添加商品成功
      if (res.data.meta.status === 201) {
        this.$message({
          message: '添加商品成功',
          type: 'success',
          duration: 800
        })
        this.$router.push('/goods')
      }
    }
  }
}
